<template>
	<div class="contentHead">
		<div class="head">
			<div class="head-box">
				<p>{{ title }}</p>
				<slot name="tab"></slot>
			</div>
			<span v-if="ifShowMore" class="more" @click="more">{{ moreText }}</span>
		</div>
		<!-- 插槽 -->
		<slot></slot>
	</div>
</template>
<script>
	export default {
		name: "ModuleHeader",
		components: {},
		props: {
			title: {
				type: String,
			},
			moreText: {
				type: String,
				default: () => {
					return '查看更多'
				}
			},
			moreColor: {
				type: String,
				default: () => {
					return "var(--theme-color)"
				}
			},
			ifShowMore: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {};
		},
		methods: {
			more() {
				this.$emit("more");
			},
		},
		created() {},
		mounted() {},
	};
</script>
<style lang="scss" scoped>
	.contentHead {

		.head {
			display: flex;
			gap: 10rpx;
			width: 100%;
			margin-bottom: 20rpx;
			align-items: center;
			justify-content: space-between;

			.head-box {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				padding: 0 10rpx;

				img {
					width: 21.91px;
					height: 18px;
					margin-right: 10px;
				}

				p {
					color: #131313;
					font-size: 32rpx;
					font-weight: 700;

				}

				span {
					color: #2d8ff4;
					font-size: 22rpx;
					font-weight: 400;
				}
			}
		}

		.more {
			color: #A1A1A1;
			font-size: 22rpx;
		}
	}
</style>